<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style type="text/css">
			/* 219971207傅博英 */
		body{
			margin:0;
			padding:0;
			font-size:12px;
			line-height:20px;
		}
		.main{
			width:525px;
			margin-left:auto;
			margin-right:auto;
			}
		.hr_1 {
			font-size: 14px;
			font-weight: bold;
			color: #3275c3;
			height: 35px;
			border-bottom-width: 2px;
			border-bottom-style: solid;
			border-bottom-color: #3275c3;
			vertical-align:bottom;
			padding-left:12px;}
		.left{
			text-align:right;
			width:80px;
			height:25px;
			padding-right:5px;}
			
		.center{width:135px;}
		.inputClass{
			width:130px;
			height:16px;
			border:solid 1px #79abea;}
		div{color:#f00;}	
		</style>

	</head>
	<body>
	<table class="main" border="0" cellspacing="0" cellpadding="0">
	  <tr>
	    <td class="hr_1">新用户注册</td>
	  </tr>
	  <tr>
	    <td style="height:10px;"></td>
	  </tr>
	  <form action="" method="post" name="myform">
	  <tr>
	    <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
	  <tr>
	    <td class="left">用户名：</td>
	    <td class="center"><input id="user" type="text" class="inputClass" onblur="checkUser()" /></td>
	    <td><div id="user_prompt">用户名由4-16位字符组成，不能包含数字</div></td>
	  </tr>
	  <tr>
	    <td class="left">密码：</td>
	    <td class="center"><input id="pwd" type="password" class="inputClass"  onblur="checkPwd()"/></td>
	    <td><div id="pwd_prompt">密码由4-10位字符组成</div></td>
	  </tr>
	  <tr>
	    <td class="left">确认密码：</td>
	    <td class="center"><input id="repwd" type="password" class="inputClass"  onblur="checkRepwd()"/></td>
	    <td><div id="repwd_prompt"></div></td>
	  </tr>
	   <tr>
	    <td class="left">电子邮箱：</td>
	    <td class="center"><input id="email" type="text" class="inputClass"  onblur="checkEmail()"/></td>
	    <td><div id="email_prompt">邮箱格式示例：web@126.com</div></td>
	  </tr>
	    <tr>
	    <td class="left">手机号码：</td>
	    <td class="center"><input id="mobile" type="text" class="inputClass" onblur="checkMobile()" /></td>
	    <td><div id="mobile_prompt"></div></td>
	  </tr>
	  <tr>
	    <td class="left">出生日期：</td>
	    <td class="center"><input id="birth" type="text" class="inputClass"  onblur="checkBirth()"/></td>
	    <td><div id="birth_prompt">请按xxxx-xx-xx输入出生日期</div></td>
	  </tr>
	  <!-- <tr>
	    <td class="left">&nbsp;</td>
	    <td class="center"><input name="" type="image" src="images/register.jpg" /></td>
	    <td>&nbsp;</td>
	  </tr> -->
	<tr>
	  <td class="left">&nbsp;</td>
	  <td class="center"><input type="submit" name="submit" value="注册" onclick="checkAll()" /></td>
	  <td>&nbsp;</td>
	</tr>

	</table>
	</td>
	  </tr>
	  </form>
	</table>
	
	</body>
	<script type="text/javascript">
	function $(elementId){
	  return document.getElementById(elementId);
		}
	/*用户名验证*/
	function checkUser(){
		var user=$("user").value;
		var userId=$("user_prompt");
		userId.innerHTML="";
		if(user.length<4 || user.length>16)
		{
			userId.innerHTML="请输入4-16位用户名";
			return false;
		}
		for(var i=0;i<user.length;i++){
			if(!isNaN(user.charAt(i))){
				userId.innerHTML="用户名中不能包含数字";
				return false;
			}
		}
		return true;
	}
	/*密码验证*/	
	function checkPwd(){
	  var pwd=$("pwd").value;
	  var pwdId=$("pwd_prompt");
	   pwdId.innerHTML="";	
	  if(pwd.length<4 || pwd.length>10)
	  {
		  pwdId.innerHTML="密码长度在4-10之间";
		  return false;
	  }    
		  return true;
	}	
	function checkRepwd(){
	  var repwd=$("repwd").value;
	  var pwd=$("pwd").value;
	  var repwdId=$("repwd_prompt");
	   repwdId.innerHTML="";
	    if(pwd!=repwd){
		   repwdId.innerHTML="两次输入的密码不一致";
		return false;
		  }
		  return true;
		}
	/*验证邮箱*/
	function checkEmail(){
	  var email=$("email").value;
	  var email_prompt=$("email_prompt");
	  email_prompt.innerHTML="";
	  var index=email.indexOf("@",1);
	  if(index==-1){
	  	email_prompt.innerHTML="输入的邮箱格式中应包含@符号";
		return false;	
	  }
	  if(email.indexOf(".",index)==-1){
	  	email_prompt.innerHTML="输入的邮箱格式中应包含.符号且在@符号后面";
		return false;
	  }
		  return true;
	}
	/*验证手机号码*/
	function checkMobile(){
		var mobile=$("mobile").value;
		var mobileId=$("mobile_prompt");
		mobileId.innerHTML="";
		if(mobile.charAt(0)!=1)
		{
			mobileId.innerHTML="手机号开始位应该为1";
			return false;
		}
		for(var i=0;i<mobile.length;i++){
			if(isNaN(mobile.charAt(i)))
			{
				mobileId.innerHTML="手机号码不能包含字符";
				return false;
			}
		}
			return true;
		}
	/*生日验证*/
	function checkBirth(){
		var birth=$("birth").value;
		var birthId=$("birth_prompt");
		birthId.innerHTML="";
		if(birth.length!=10 || birth.charAt(4)!="-" || birth.charAt(7)!="-"){
			birthId.innerHTML="出生日期输入格式不正确";
			return false;
		}
		var birthdays=birth.split("-");
		year=parseInt(birthdays[0],10);
		month=parseInt(birthdays[1],10);
		day=parseInt(birthdays[2],10);
		var now=new Date();
		nowYear=now.getFullYear();
		if(isNaN(year) || isNaN(month) || isNaN(day)){
			birthId.innerHTML="出生日期不能包含字符";
			return false;
		}
		if(year<1900 || year>nowYear)
		{
			birthId.innerHTML="出生年份输入有误";
			return false;
		}
		if(month<=0 || month>12)
		{
			birthId.innerHTML="出生月份输入有误";
			return false;
		}
		if(day<=0 || day>31)
		{
			birthId.innerHTML="出生日期输入有误";
			return false;
		}
			return true;
		}
		
		function checkAll() {
		  var username = $("user").value;
		  var userpswd = $("pwd").value;
		  var useremail = $("email").value;
		  var userbirthdate = $("birth").value;
		
		  if (checkUser() && checkPwd() && checkEmail() && checkBirth()) {
		    alert("注册成功");
			 document.myform.submit();
		  }
		  else {alert("注册失败");}
		   document.myform.submit();
		}

	</script>
</html>